<!--
@description ：投放统计--投放统计
-->

<template>
  <div class="app-container">
    <div class="data-textarea">
      <div class="data-card" style="margin-left: 0;position: relative">
        <svg-icon class="retainIcon" icon-class="retain01" style="font-size: 26px"></svg-icon>
        <div class="data-Info">
          <div class="data-Info-tip">今日访问量</div>
          <div class="data-num">
            {{ todayViewCount || 0 }}
          </div>
        </div>
        <el-tooltip content="当日全部投放页面的总访问量" effect="dark"
                    placement="top">
          <svg-icon icon-class="question-white"
                    style="position: absolute; top: 30px;right: 30px;font-size: 24px"></svg-icon>
        </el-tooltip>
      </div>
      <div class="data-card" style="position: relative">
        <svg-icon class="retainIcon" icon-class="retain02" style="font-size: 26px;"></svg-icon>
        <div class="data-Info">
          <div class="data-Info-tip">今日访问人数</div>
          <div class="data-num">
            {{ todayPeopleCount || 0 }}
          </div>
        </div>
        <el-tooltip content="当日全部投放页面的总访人数" effect="dark" placement="top">
          <svg-icon icon-class="question-white"
                    style="position: absolute; top: 30px;right: 30px;font-size: 24px"></svg-icon>
        </el-tooltip>
      </div>
      <div class="data-card" style="position: relative">
        <svg-icon class="retainIcon" icon-class="retain03" style="font-size: 26px"></svg-icon>
        <div class="data-Info">
          <div class="data-Info-tip">今日留资数</div>
          <div class="data-num">
            {{ todayRetainCount || 0 }}
          </div>
        </div>
        <el-tooltip content="当日全部投放页面的总留资数" effect="dark" placement="top">
          <svg-icon icon-class="question-white"
                    style="position: absolute; top: 30px;right: 30px;font-size: 24px"></svg-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="core">
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">页面信息</div>
        </div>
      </div>
      <div class="content">
        <div>
          <el-form ref="operateForm1" :model="queryForm1"
                   style="display: flex;justify-content: end;width: 100%;padding:10px 30px 0 0;margin: 0"
                   @submit.prevent.native>
            <el-form-item prop="pageTitle" style="width: 240px">
              <el-input v-model="queryForm1.pageTitle" clearable placeholder="页面名称"
                        @change="inputChange(queryForm1.pageTitle, '1')">
              </el-input>
            </el-form-item>
            <el-form-item prop="timeType" style="width: 240px">
              <el-radio-group v-model="queryForm1.timeType" style="display: flex;justify-content: space-evenly"
                              @input="radioDateSelect(queryForm1.timeType, '1')">
                <div v-for="item in timeTypeList1" :key="item.dictValue">
                  <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
                </div>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="selectTime" style="width: 240px">
              <el-date-picker v-model="queryForm1.selectTime" :end-placeholder="'结束日期'"
                              :start-placeholder="'开始日期'"
                              range-separator="至" style="width: 100%;" type="daterange"
                              value-format="yyyy-MM-dd" @change="dateChange('1')"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <!-- 图表 -->
        <div class="chart">
          <div id="pagesStatistics"></div>
        </div>
      </div>
    </div>
    <div class="core">
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">用户信息</div>
        </div>
      </div>
      <!-- 图表 -->
      <div>
        <div style="  margin-top: 16px; border-top: 1px solid #e8e8e8;">
          <el-form ref="operateForm2" :model="queryForm2"
                   style="display: flex;justify-content: end;width: 100%;padding:10px 30px 0 0;margin: 0"
                   @submit.prevent.native>
            <el-form-item prop="pageTitle" style="width: 240px">
              <el-input v-model="queryForm2.pageTitle" clearable placeholder="页面名称"
                        @change="inputChange(queryForm2.pageTitle, '2')">
              </el-input>
            </el-form-item>
            <el-form-item prop="timeType" style="width: 240px">
              <el-radio-group v-model="queryForm2.timeType" style="display: flex;justify-content: space-evenly"
                              @input="radioDateSelect(queryForm2.timeType, '2')">
                <div v-for="item in timeTypeList2" :key="item.dictValue">
                  <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
                </div>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="selectTime" style="width: 240px">
              <el-date-picker v-model="queryForm2.selectTime" :end-placeholder="'结束日期'"
                              :start-placeholder="'开始日期'"
                              range-separator="至" style="width: 100%;" type="daterange"
                              value-format="yyyy-MM-dd" @change="dateChange('2')"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="chart2">
          <div id="sexStatistics"></div>
          <div id="sourceStatistics"></div>
        </div>
      </div>
    </div>
    <div class="core">
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">页面排行</div>
        </div>
        <div style="padding: 20px">
          <div>
            <el-form ref="operateForm3" :model="queryForm3"
                     style="display: flex;justify-content: end;width: 100%;padding:0px 0 10px 0;margin: 0"
                     @submit.prevent.native>
              <el-form-item prop="timeType" style="width: 260px">
                <el-radio-group v-model="queryForm3.timeType" style="display: flex;justify-content: space-evenly"
                                @input="radioDateSelect(queryForm3.timeType, '3')">
                  <div v-for="item in timeTypeList3" :key="item.dictValue">
                    <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="selectTime" style="width: 240px">
                <el-date-picker v-model="queryForm3.selectTime" :end-placeholder="'结束日期'"
                                :start-placeholder="'开始日期'"
                                range-separator="至" style="width: 100%;" type="daterange"
                                value-format="yyyy-MM-dd" @change="dateChange('3')"></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <el-table ref="tableRef" v-loading="tableLoading" :data="tableData" :row-style="{ height: '40px' }"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" max-height="460"
                    row-key="journeyConfigId">
            <el-table-column :width="60" align="center" label="排行" prop="sort">
            </el-table-column>
            <el-table-column :min-width="180" align="center" label="页面名称" prop="pageTitle"
                             show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="总留资数" prop="totalCustomer"></el-table-column>
            <el-table-column align="center" label="总留资率" prop="totalCustomerPercent">
              <template slot-scope="{ row }">
                {{ row.totalCustomerPercent || 0}}%
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="queryForm3.pageNum" :pageSize="queryForm3.pageSize" :total="total"
                            @handleCurrentChange="handleCurrentChange"
                            @handleSizeChange="handleSizeChange"></NormalPagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import {queryCapitalCustomerInfo, queryCapitalDataList, queryCapitalPageSort} from "@/api/placementStatistics";

export default {
  name: "placementStatisticsList", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      tableData: [],
      tableLoading: false,
      todayViewCount: 0,
      todayPeopleCount: 0,
      todayRetainCount: 0,
      total: 0,
      queryForm1: {
        pageTitle: '',
        timeType: '1',
        selectTime: [],
      }, // 页面信息查询
      timeTypeList1: [
        {dictValue: '1', dictLabel: '最近7天'},
        {dictValue: '2', dictLabel: '最近30天'},
      ],
      queryForm2: {
        pageTitle: '',
        timeType: '0',
        selectTime: [],
      }, // 页面信息查询
      timeTypeList2: [
        {dictValue: '1', dictLabel: '最近7天'},
        {dictValue: '2', dictLabel: '最近30天'},
      ],
      queryForm3: {
        timeType: '0',
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      }, // 页面信息查询
      timeTypeList3: [
        {dictValue: '0', dictLabel: '今日'},
        {dictValue: '1', dictLabel: '最近7天'},
        {dictValue: '2', dictLabel: '最近30天'},
      ]
    }
  },
  watch: {},
  computed: {},
  methods: {
    getEcharts(data) {
      let NameData = data.map(item => item.date)
      let pvNum = data.map(item => item.pv)
      let uvNum = data.map(item => item.uv)
      let totalCustomerNum = data.map(item => item.totalCustomer)
      let NameData1 = ['NameDate', ...NameData] || ['NameDate']
      let pvNum1 = ['pvNum', ...pvNum] || ['pvNum']
      let uvNum1 = ['uvNum', ...uvNum] || ['uvNum']
      let totalCustomerNum1 = ['totalCustomerNum', ...totalCustomerNum] || ['totalCustomerNum']
      window.setTimeout(() => {
        this.myChart = echarts.init(document.getElementById('pagesStatistics'))
        this.myChart.dispose();
        this.myChart = echarts.init(document.getElementById('pagesStatistics'))
        this.myChart.setOption({
          dataset: {
            source: [
              NameData1,
              pvNum1,
              uvNum1,
              totalCustomerNum1
            ]
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            //   orient: "vertical",
            x: 'left', //可设定图例在左、右、居中
            y: 'top', //可设定图例在上、下、居中
            data: ['当日访问量', '当日访问人数', '当日留资数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          color: ['#14D595', '#FFAD3A', '#082aff'],
          xAxis: {
            type: 'category',
            data: NameData,
            axisLabel: {
              interval: 0,
              rotate: NameData.length > 8 ? 45 : 0
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'},
              name: '当日访问量',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              // showSymbol: false,
              lineStyle: {
                normal: {
                  width: 2
                }
              },
              showSymbol: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(255,82,82,0.06)'
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(254,97,89,0)'
                      }
                    ],
                    false
                  ),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: '#14D595',
                  borderColor: 'rgba(255,207,118,0.27)',
                  borderWidth: 12
                }
              },
            },
            {
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'},
              name: '当日访问人数',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              // showSymbol: false,
              lineStyle: {
                normal: {
                  width: 2
                }
              },
              showSymbol: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(255,82,82,0.06)'
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(254,97,89,0)'
                      }
                    ],
                    false
                  ),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: '#FFAD3A',
                  borderColor: 'rgba(255,207,118,0.27)',
                  borderWidth: 12
                }
              },
            },
            {
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'},
              name: '当日留资数',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              // showSymbol: false,
              lineStyle: {
                normal: {
                  width: 2
                }
              },
              showSymbol: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(255,82,82,0.06)'
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(254,97,89,0)'
                      }
                    ],
                    false
                  ),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: '#082aff',
                  borderColor: 'rgba(255,207,118,0.27)',
                  borderWidth: 12
                }
              },
            }
          ]
        })
      }, 10)
    },
    getChartsSex(data) {
      let myChart = echarts.init(document.getElementById('sexStatistics'))
      let options = {
        title: {
          text: '性别',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: function (params) {
            let loading =
              params.data.name + ':' + params.data.count + '人<br>\n' + params.data.value +  '%'
            return loading
          }
        },
        legend: {
          top: 'center',
          left: '80%',
          orient: 'vertical'
        },
        color: ['#FFAB96', '#FFBC5F'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: true,
              // formatter: `{b}:{c}% \n\n`,
              formatter: function(params) {
                var result = '';
                result += params.data.name + ':' + params.data.count + '人' + '\n\n' + params.data.value + '%';
                return result;
              },
              padding: [0, -60],
              textStyle: {
                color: '#082aff',
              }
            },
            labelLine: {
              show: true,
              showAbove: true,
              length2: '80',
              length: 30,
            },
            data
          }
        ]
      }
      myChart.setOption(options)
    },
    getEchartsSource(data) {
      let myChart = echarts.init(document.getElementById('sourceStatistics'))
      let options = {
        title: {
          text: '渠道',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: function (params) {
            let loading =
              params.data.name + ':' + params.data.count + '人<br>\n' + params.value + '%'
            return loading
          }
        },
        legend: {
          top: 'center',
          left: '80%',
          orient: 'vertical'
        },
        color: ['#FFAB96', '#FFAD3A', '#FFDA8C', '#082aff', '#F4EBEB', '#FFBC5F'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: true,
              // formatter: `{b}:{c}% \n\n`,
              formatter: function(params) {
                var result = '';
                result += params.data.name + ':'   + params.data.count + '人' + '\n\n' + params.data.value + '%';
                return result;
              },
              padding: [0, -60],
              textStyle: {
                color: '#082aff'
              }
            },
            labelLine: {
              show: true,
              showAbove: true,
              length2: '60',
              length: 20
            },
            data
          }
        ]
      }
      myChart.setOption(options)
    },
    inputChange(val, flag) {
      if (flag == '1') this.handleQuery1()
      if (flag == '2') this.handleQuery2()
    },
    radioDateSelect(val, flag) {
      let da = 0
      if (val == '0') {
        da = 0
      } else if (val == '1') {
        da = 7
      } else if (val == '2') {
        da = 30
      }
      let currentDate = new Date();
      let nowDate = new Date()
      nowDate.setHours(23, 59, 59, 59)
      let endDate = currentDate.toISOString().substring(0, 10)
      currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
      // let endDate = currentDate.toISOString().substring(0, 10); // 当天的日期作为结束日期
      currentDate.setDate(currentDate.getDate() - da + 1); // 将日期设置为需要的天数
      let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
      let datesArray = [startDate, endDate]
      if (flag == '1') {
        this.queryForm1.selectTime = datesArray
        this.$set(this.queryForm1, 'selectTime', datesArray)
        this.dateChange('1')
      } else if (flag == '2') {
        this.queryForm2.selectTime = datesArray
        this.$set(this.queryForm2, 'selectTime', datesArray)
        this.dateChange('2')
      } else if (flag == '3') {
        this.queryForm3.selectTime = datesArray
        this.$set(this.queryForm3, 'selectTime', datesArray)
        this.dateChange('3')
      }
    },
    dateChange(flag) {
      if (flag == '1') this.handleQuery1()
      if (flag == '2') this.handleQuery2()
      if (flag == '3') this.handleQuery3()
    },
    // 获取顶部
    handleQuery() {
      let currentDate = new Date();
      let nowDate = new Date()
      nowDate.setHours(23, 59, 59, 59)
      let endDate = currentDate.toISOString().substring(0, 10)
      currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
      currentDate.setDate(currentDate.getDate() + 1); // 将日期设置为需要的天数
      let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
      let obj = {
        startTime: startDate,
        endTime: endDate,
      }
      queryCapitalDataList(obj).then(res => {
        this.todayViewCount = res?.data?.[0]?.pv
        this.todayPeopleCount = res?.data?.[0]?.uv
        this.todayRetainCount = res?.data?.[0]?.totalCustomer
      })
    },
    handleQuery1() {
      let obj = {
        startTime: this.queryForm1?.selectTime[0] || '',
        endTime: this.queryForm1?.selectTime[1] || '',
        pageTitle: this.queryForm1?.pageTitle
      }
      queryCapitalDataList(obj).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          this.getEcharts(res.data)
        }
      })
    },
    handleQuery2() {
      let obj = {
        startTime: this.queryForm2?.selectTime[0] || '',
        endTime: this.queryForm2?.selectTime[1] || '',
        pageTitle: this.queryForm2?.pageTitle
      }
      queryCapitalCustomerInfo(obj).then(res => {
        if (res.code == 200) {
          const genderData = res.data?.genderPercentList?.map(item => {
            return {
              ...item,
              value: item.genderPercent || 0,
              count: item.genderCount || 0,
              name: item.gender || ''
            }
          })
          this.getChartsSex(genderData)
          const sourceData = res.data?.customerSourceList?.map(item => {
            return {
              ...item,
              value: item.customerPercent || 0,
              count: item.customerCount || 0,
              name: item.customer || ''
            }
          })
          this.getEchartsSource(sourceData)
        }
      })
    },
    handleQuery3() {
      this.queryForm3.pageNum = 1
      this.getPageSort()
    },
    handleSizeChange(val) {
      this.queryForm3.pageNum = 1
      this.queryForm3.pageSize = val
      this.handleQuery3()
    },
    handleCurrentChange(val) {
      this.queryForm3.pageNum = val
      this.handleQuery3()
    },
    getPageSort() {
      let obj = {
        startTime: this.queryForm3?.selectTime[0] || '',
        endTime: this.queryForm3?.selectTime[1] || '',
        pageNum: this.queryForm3.pageNum,
        pageSize: this.queryForm3.pageSize
      }
      this.tableData = []
      this.tableLoading = true
      queryCapitalPageSort(obj).then(res => {
        if (res.code == 200) {
          this.tableData = res.rows
          this.total = res.total || 0
        }
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
        this.tableData = []
      })
    },
  },
  mounted() {
    this.handleQuery()
    this.radioDateSelect('1', '1')
    this.radioDateSelect('0', '2')
    this.radioDateSelect('0', '3')
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.app-container {
  height: 100%;
  padding: 0;
}

.data-textarea {
  display: flex;

  .data-card {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    margin: 10px;
    height: 120px;
    padding: 16px 12px 12px 18px;
    display: flex;
    align-items: center;
  }
}

.chart {
  width: 100%;

  #pagesStatistics {
    height: 380px;
    margin: 26px 0 0 20px;
  }
}

.core {
  position: relative;
  margin-top: 20px;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 0;

  .infostyle {
    flex: 1;
    display: flex;
    flex-direction: row;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #393b44;

    .titleboxstyle {
      display: inline-block;
      width: 2px;
      height: 16px;
      background-color: #082aff;
    }
  }

  .content {
    margin-top: 16px;
    border-top: 1px solid #F0F0F0;

    .table-top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 16px;
    }
  }

}

.chart2 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  #sexStatistics {
    margin: 10px;
    flex: 1;
    height: 324px;
    margin-right: 20px;
    box-sizing: border-box;
  }

  #sourceStatistics {
    margin: 10px;
    box-sizing: border-box;
    flex: 1;
    height: 324px;
  }
}

.retainIcon {
  display: inline-block;
  width: 60px;
  height: 60px;
}

.data-Info {
  margin-left: 28px;

  .data-Info-tip {
    font-size: 16px;
  }

  .data-num {
    font-size: 36px;
    font-weight: 500;
  }
}

</style>
